<template>
  <div class="app-container">
    <el-card>
      <!-- 顶部   -->
      <div class="btn_wrapper">
        <span style="font-size: 12px; color: pink"
          >说明：目前支持学科和关键字条件筛选</span
        >
        <el-button
          type="success"
          size="small"
          @click="$router.push({ name: 'questions-new' })"
        >
          <i class="el-icon-edit"></i>新增试题
        </el-button>
      </div>
      <!-- 筛选表单 -->
      <el-form
        :model="queryData"
        ref="questionForm"
        label-width="80px"
        size="small"
      >
        <el-row>
          <!-- 学科 -->
          <el-col :span="6">
            <el-form-item prop="subjectID" label="学科">
              <el-select
                v-model="queryData.subjectID"
                @change="subjectChange"
                placeholder="请选择学科"
              >
                <el-option
                  v-for="item in subList"
                  :key="item.id"
                  :label="item.subjectName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 二级目录 -->
          <el-col :span="6">
            <el-form-item prop="catalogID" label="二级目录">
              <el-select
                v-model="queryData.catalogID"
                placeholder="请选择二级目录"
              >
                <el-option
                  v-for="item in secondLevelList"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item prop="tags" label="标签">
              <el-select v-model="queryData.tags" placeholder="请选择标签">
                <el-option
                  v-for="item in labelList"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item prop="keyword" label="关键字">
              <el-input
                v-model="queryData.keyword"
                placeholder="根据题干搜索"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 试题类型 -->
          <el-col :span="6">
            <el-form-item prop="questionType" label="试题类型">
              <el-select
                v-model="queryData.questionType"
                placeholder="请选择试题类型"
              >
                <el-option
                  v-for="item in questionsList"
                  :key="item.value"
                  :label="item.type"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item prop="difficulty" label="难度">
              <el-select
                v-model="queryData.difficulty"
                placeholder="请选择难度"
              >
                <el-option
                  v-for="item in Difficulty"
                  :key="item.value"
                  :label="item.type"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item prop="direction" label="方向">
              <el-select v-model="queryData.direction" placeholder="请选择方向">
                <el-option
                  v-for="item in DirectionList"
                  :key="item.value"
                  :label="item.type"
                  :value="item.type"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item prop="creatorID" label="录入人">
              <el-select
                v-model="queryData.creatorID"
                placeholder="请选择录入人"
              >
                <el-option
                  v-for="item in simpleList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.username"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 题目备注 -->
          <el-col :span="6">
            <el-form-item prop="remarks" label="题目备注">
              <el-input
                v-model="queryData.remarks"
                placeholder="请输入题目备注"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item prop="shortName" label="企业简称">
              <el-input
                v-model="queryData.shortName"
                placeholder="请输入企业简称"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6">
            <el-form-item prop="province" label="城市">
              <!-- 省份 -->
              <el-select
                style="width: 48%; margin-right: 2%"
                v-model="queryData.province"
                placeholder="请选择省份"
                @change="choiceCity"
              >
                <el-option
                  v-for="item in provinces"
                  :key="item.index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <!-- 城市 -->
              <el-select
                style="width: 50%"
                v-model="queryData.city"
                placeholder="请选择城市"
              >
                <el-option
                  v-for="item in city"
                  :key="item.index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 按钮区域 -->
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button size="small" @click="clearForm">清除</el-button>
              <el-button size="small" type="primary" @click="searchQuestions"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 消息提示 -->
      <el-alert
        style="margin-bottom: 15px"
        title=""
        type="info"
        show-icon
        :closable="false"
      >
        数据一共{{ total }}条
      </el-alert>
      <div class="table" style="width: 100%">
        <el-table
          ref="filterTable"
          :data="tableData"
          fit
          style="width: auto"
          :header-cell-style="{
            background: '#fafafa',
            color: '#909399',
            borderBottom: '2px solid #e8e8e8'
          }"
        >
          <el-table-column prop="number" label="试题编号"> </el-table-column>
          <el-table-column prop="subject" label="学科"> </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>
          <el-table-column label="题型">
            <template slot-scope="scoped">
              {{ filterList(scoped.row.questionType, true) }}
            </template>
          </el-table-column>
          <el-table-column label="题干">
            <template slot-scope="scoped">
              {{ toHtml(scoped.row.question) }}
            </template>
          </el-table-column>
          <el-table-column width="180px" label="录入时间">
            <template slot-scope="scoped">
              {{ formatTime(scoped.row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column label="难度">
            <template slot-scope="scoped">
              {{ filterList(scoped.row.difficulty, false) }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column width="195px" label="操作">
            <template slot-scope="scoped">
              <el-button
                type="primary"
                plain
                icon="el-icon-view"
                circle
                @click="previewHeadler(scoped.row.id)"
              ></el-button>
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                circle
                @click="
                  $router.push({
                    name: 'questions-new',
                    query: { id: scoped.row.id }
                  })
                "
              ></el-button>
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                circle
                @click.native="delQuestions(scoped.row)"
              ></el-button>
              <el-button
                type="warning "
                plain
                icon="el-icon-check"
                circle
                @click="toQuestionsChoice(scoped.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页组件 -->
      <div class="page">
        <span></span>
        <el-pagination
          background
          layout="prev, pager, next,sizes,jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 50]"
          :total="total"
        >
        </el-pagination>
      </div>

      <!-- 预览弹窗 -->
      <el-dialog
        v-if="previewDialogVisible"
        title="题目预览"
        :visible.sync="previewDialogVisible"
        width="60%"
      >
        <questions-preview-dia
          ref="questionDia"
          @close="previewDialogVisible = false"
        ></questions-preview-dia>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { html2Text } from '@/utils/index'
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
import { subjectList } from '@/api/hmmm/subjects'
import { provinces, citys } from '@/api/hmmm/citys'
import { simpleList } from '@/api/base/users'
import { dirList } from '@/api/hmmm/directorys'
import { simple as labelSimpleList } from '@/api/hmmm/tags'
import moment from 'moment'
import questionsPreviewDia from '../components/questions-preview-dia.vue'
export default {
  name: 'questions',
  data () {
    return {
      datas: [], // 城市数组
      tableData: [], // 表格数据
      total: 0, // 总条数
      queryData: {
        page: 1, // 当前页数
        pagesize: 10, // 每页条数
        subjectID: null, // 学科
        catalogID: null, // 目录
        tags: null, // 标签名称
        keyword: null, // 关键字
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 省份
        city: null // 城市
      },
      subList: [], // 学科数据
      questionsList: [
        { id: '1', type: '单选' },
        { id: '2', type: '多选' },
        { id: '3', type: '简答' }
      ], // 试题类型数据
      Difficulty: [
        { id: '1', type: '简单' },
        { id: '2', type: '一般' },
        { id: '3', type: '困难' }
      ], // 难度数据
      DirectionList: [
        { value: '1', type: 'o2o' },
        { value: '2', type: '外包服务' },
        { value: '3', type: '企业服务' },
        { value: '4', type: '互联网金融' },
        { value: '5', type: '企业咨询' },
        { value: '6', type: '互联网' },
        { value: '7', type: '电子商务' },
        { value: '8', type: '其他' }
      ], // 方向数据
      provinces: provinces(), // 城市省份数据
      city: [], // 城市二级菜单数据
      simpleList: [], // 录入人选数据
      secondLevelList: [], // 二级下拉数据
      labelList: [], // 标签下拉数据
      previewDialogVisible: false // 控制预览弹窗的显示与隐藏
    }
  },
  components: {
    questionsPreviewDia
  },
  created () {
    this.loadQuestion()
    this.loadsubjectList()
    this.loadSimpleList()
  },
  methods: {
    // 绑定分页的当前页大小
    handleSizeChange (val) {
      this.queryData.pagesize = val
      this.loadQuestion(this.queryData)
    },
    // 绑定分页的当前页
    handleCurrentChange (val) {
      this.queryData.page = val
      this.loadQuestion(this.queryData)
    },
    // 获取基础题库数据
    async loadQuestion () {
      const { data } = await list(this.queryData)
      this.total = data.counts
      this.tableData = data.items
    },
    // 使用将数据中的标签转换成内容
    toHtml (val) {
      return html2Text(val)
    },
    // 将时间格式化
    formatTime (val) {
      return moment(val).format('YYYY-MM-DD HH:mm:ss')
    },
    // 获取学科
    async loadsubjectList () {
      const { data } = await subjectList()
      this.subList = data.items
    },
    // 筛选下拉项试题类型,难度
    filterList (val, flag) {
      if (flag) {
        const whiteList = ['1', '2', '3', 1, 2, 3]
        if (whiteList.includes(val)) {
          return this.questionsList.find((item) => item.id === val).type
        } else {
          return '废数据'
        }
      } else {
        const whiteList = ['1', '2', '3', 1, 2, 3]
        if (whiteList.includes(val)) {
          // eslint-disable-next-line eqeqeq
          return this.Difficulty.find((item) => item.id === val).type
        } else {
          return '废数据'
        }
      }
    },
    // 基础题库的删除功能实现
    async delQuestions (row) {
      const result = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示'
      ).catch((err) => err)
      if (result === 'confirm') {
        const res = await remove(row)
        console.log(res)
        if (res.status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          if (this.queryData.page > 1 && this.tableData.length === 1) {
            this.queryData.page--
          }
          this.loadQuestion()
        }
      }
    },
    // 将基础题库中的数据加入精选题库
    async toQuestionsChoice (row) {
      console.log(row)
      const result = await this.$confirm(
        '此操作将改题目加入精选,是否继续?',
        '提示'
      ).catch((err) => err)
      if (result === 'confirm') {
        const res = await choiceAdd({
          id: row.id,
          choiceState: 1
        })
        console.log(res)
        if (res.status === 200) {
          this.$message({
            type: 'success',
            message: '加入精选成功!'
          })
          this.loadQuestion()
        }
      }
    },
    // 渲染二级城市下拉菜单
    choiceCity () {
      this.queryData.city = null
      this.city = citys(this.queryData.province)
    },
    // 渲染录入人下拉选项
    async loadSimpleList () {
      const { data } = await simpleList()
      this.simpleList = data
    },
    // 当一级菜单的值发生改变发送请求获取二级菜单数据
    async subjectChange () {
      const resDir = await dirList({ subjectID: this.queryData.subjectID })
      this.secondLevelList = resDir.data
      const resLabel = await labelSimpleList({
        subjectID: this.queryData.subjectID
      })
      this.labelList = resLabel.data
    },
    // 清除表单数据还原默认数据
    clearForm () {
      this.$refs.questionForm.resetFields()
      this.queryData.city = null
    },
    // 根据对应的条件筛选数据并发送请求重新获取数据
    async searchQuestions () {
      const {
        data: { items }
      } = await list(this.queryData)
      this.tableData = items
      this.clearForm()
    },
    // 预览弹窗
    previewHeadler (val) {
      this.previewDialogVisible = true
      this.$nextTick(() => {
        console.log(this.$refs.questionDia.id)
        this.$refs.questionDia.id = val
      })
    }
  }
}
</script>

<style scoped lang="scss">
.top {
  display: flex;
  justify-content: space-between;
}
.table {
  padding-bottom: 20px;
}
.page {
  display: flex;
  justify-content: space-between;
}

::v-deep .el-pagination__jump {
  margin-left: 0;
}
::v-deep .el-alert__icon {
  font-size: 16px;
}
::v-deep .el-alert {
  margin: 0;
}
.btn_wrapper {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-select {
  width: 100%;
}
</style>
